<template>
  <div class="dir_wrap">
    <el-button type="success"
               @click="dirFlag=true">添加目录</el-button>
    <el-table border
              ref="mytab"
              :data="dirList"
              :highlight-current-row="true"
              @current-change="tabelChange">
      <el-table-column label="目录名称"
                       prop="CDName">
      </el-table-column>
      <el-table-column label="课件数"
                       prop="CourseNumber">
      </el-table-column>
      <el-table-column label="操作">
        <template slot-scope="scope">
          <div>
            <el-link type="success"
                     @click="editDir(scope.row)">编辑</el-link>
            <el-link type="danger"
                     @click="delDirfn(scope.row._id)">删除</el-link>
          </div>
        </template>
      </el-table-column>
    </el-table>
    <el-dialog :title="dirTitle"
               width="30%"
               :visible.sync="dirFlag">
      <el-input v-model="dirName"
                placeholder="输入目录名称"></el-input>
      <span slot="footer">
        <el-button type="success"
                   @click="addDirfn"> {{dirBtn}}</el-button>
        <el-button type="primary"
                   @click="dirFlag=false">取消</el-button>
      </span>
    </el-dialog>
  </div>
</template>

<script>
import { addDir, getDirVideo, delDir, getCourseDir, editDirApi } from '../../api/course'
export default {
  name: 'Ljfvue2011Dir',

  data () {
    return {
      dirTitle: "添加目录",
      dirBtn: "确定",
      dirName: "",//目录名称
      dirList: [],
      dirFlag: false,
      CDid: "",//课程id
      dirid: ""//修改的目录id
    };
  },
  beforeMount () {
    // 接受传来的目录信息
    this.$bus.$on("senddir", (dirlist) => {
      this.dirList = dirlist;
    })
  },
  mounted () {

  },
  methods: {
    editDir (row) { //点击了编辑目录
      console.log(row)
      this.dirTitle = "修改目录"
      this.dirBtn = "确认修改"
      this.dirName = row.CDName;
      this.dirFlag = true;
      this.dirid = row._id;//存储修改的目录id
    },
    async delDirfn (_id) { //删除目录
      var res = await delDir({
        cid: this.$route.query._cid,
        _id: _id
      })
      console.log(res)
      // 删除后获取最新的课程下的目录
      var dirRes = await getCourseDir({
        CDid: this.$route.query.CDid
      })
      console.log(dirRes)
      this.dirList = dirRes.data.data.list;
    },

    async tabelChange (currentRow, oldCurrentRow) { //目录表格切换
      console.log(currentRow)
      // 将当前选择行的目录id传送到兄弟组件
      console.log(8888888888888)
      // 获取目录下视频
      var res = await getDirVideo({
        CDid: this.$route.query._cid,
        _id: currentRow._id
      })
      this.$bus.$emit("senddirid", currentRow._id, res.data.data.list)
    },
    async addDirfn () { //添加目录和修改目录
      console.log(this.$route.query._cid)
      console.log(this.$route.query.CDid)
      if (this.dirBtn == "确定") { //添加目录
        var res = await addDir({
          CDName: this.dirName, //目录名称
          CDid: "" + this.$route.query.CDid,//课程ID
          _id: this.$route.query._cid//课程的_id
        })
        this.$message({
          message: "添加目录成功",
          type: "success"
        })
      } else {//修改目录

        var editRes = await editDirApi({
          CDName: this.dirName,//目录名称,
          dirid: this.dirid,//目录_id 
          CDid: this.$route.query.CDid,//课程ID
          _id: this.$route.query._cid,//课程的_id
        })
        this.$message({
          message: "修改目录成功",
          type: "success"
        })
        console.log(editRes)
        // 赋值返回的最新目录
        this.dirList = editRes.data.data.list;
        this.dirTitle = "添加目录"
        this.dirBtn = "确定";
        this.dirid = "";//清空编辑需要的目录_id
      }
      this.dirName = "";
      this.dirFlag = false; //关闭弹出框
      console.log(res)
      // 赋值最新的目录信息
      this.dirList = res.data.data.list;
      // 设置最后一行 高亮
      this.$refs.mytab.setCurrentRow(this.dirList[this.dirList.length - 1])
    }
  },
};
</script>

<style lang="less" >
.dir_wrap {
  padding: 0 40px;
  box-sizing: border-box;
  .el-button {
    margin: 20px auto;
  }
}
.el-table__body tr.current-row > td.el-table__cell {
  background: deeppink;
  color: white;
}
</style>